<template>
  <div class="contain">
    <div class="mvType">
      <!-- 分类  先别动-->
      <div class="leftType">
        <h3 class="typeTitle">MV分类</h3>
        <ul class="typeList">
          <li
            class="itemType"
            v-for="item in mvType"
            :key="item.id"
            :class="{ active: isActive === item.id }"
            @click="handleActive(item.id)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <!-- 详情 -->
      <div class="rightContain">
        <h3 class="typeTitle">MV分类</h3>
        <!-- 单行视频播放 -->
        <ul class="detailList">
          <li
            class="item"
            v-for="item in mvShow"
            :key="item.img"
            @click="toPlay(item.id, item.name)"
          >
            <img :src="item.img" class="imgName" />
            <a
              href="#"
              style="text-decoration: none; color: #000000"
              class="vidioName"
            >
              {{ item.name }}
            </a>
          </li>
        </ul>
        <!--  -->
        <!-- 分页 -->
        <Paginat />
      </div>
    </div>
  </div>
</template>

<script>
import Paginat from "../paginations/paginations.vue";
import getcatgory from "../../../api/mvRequest/getcatgory";
// import getinfoMv from "../../../api/mvRequest/getinfoMv";
export default {
  name: "MvType",
  data() {
    return {
      mvType: [],
      isActive: 0,
      // 最后三行的数组的id
      mvShow: [],
    };
  },
  // 方法
  methods: {
    // 分类 tab
    handleActive(id) {
      this.getShowlist(id);
    },
    // 去播放
    async toPlay(id, name) {
      const { urls } = await getcatgory("/video/url", {
        params: {
          id,
        },
      });
      this.$router.push({
        name: "MvPlayer",
        query: {
          url: urls[0].url,
          name,
        },
      });
    },
    // 获取第一行数据
    async getShowlist(id) {
      let result = await getcatgory("/video/group", {
        // 传入列表分类id
        params: {
          id,
        },
      });
      // 第一行数据
      let one = result.datas.slice(0, 5).map((item) => {
        return {
          name: item.data.title,
          img: item.data.coverUrl,
          id: item.data.vid,
        };
      });
      this.mvShow = [...one];
      // 拿三行数据
      let { promise1, promise2, promise3 } = this.getPromise(one);
      //
      let arr = (await Promise.all([promise1, promise2, promise3])).map(
        (item) => {
          return item.data.map((element) => {
            return {
              name: element.title,
              img: element.coverUrl,
              id: element.vid,
            };
          });
        }
      );
      arr = arr.reduce((pre, item) => {
        // 解构只能是数组，对象，参数环境使用
        pre.push(...item);
        return pre;
      }, []);
      this.mvShow = this.mvShow.concat(arr);
      this.isActive = id;
    },
    // 三行数据的promise
    getPromise(one) {
      const promise1 = getcatgory("/related/allvideo", {
        params: {
          id: one[0].id,
        },
      });
      const promise2 = getcatgory("/related/allvideo", {
        params: {
          id: one[1].id,
        },
      });
      const promise3 = getcatgory("/related/allvideo", {
        params: {
          id: one[2].id,
        },
      });
      return {
        promise1,
        promise2,
        promise3,
      };
    },
  },
  // 周期函数
  async mounted() {
    // 分类视频
    let { data } = await getcatgory("/video/group/list");
    data = data.slice(0, 10);
    this.mvType = data;
    // 渲染数据
    this.getShowlist(data[0].id);
  },
  // 组件局部注册
  components: {
    Paginat,
  },
};
</script>

<style scoped>
.contain {
  text-align: center;
  margin-bottom: 10px;
}
.mvType {
  width: 1000px;
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
}
/* mv分类 */
.leftType {
  width: 210px;
}
.typeList {
  list-style: none;
  padding: 0;
}
.typeTitle {
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: #cfcfcf;
  font-size: 16px;
  color: #fff;
  font-weight: normal;
}
.itemType {
  height: 36px;
  line-height: 36px;
  color: #555;
  text-align: center;
  font-size: 14px;
}
.itemType:hover {
  color: #fff;
  background-color: royalblue;
}
.active {
  color: #fff;
  background-color: royalblue;
}
/* 详情 */
.rightContain {
  width: 780px;
  /* height: 100%; */
  flex-shrink: 2;
}
.detailList {
  list-style: none;
  padding: 0;
  width: 800px;
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 140px;
  height: 110px;
  margin-right: 20px;
  margin-bottom: 10px;
}
.imgName {
  display: block;
  width: 140px;
  height: 78px;
  border-radius: 10px;
}
.vidioName {
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>